<template>
  <h3>editor 组件示例</h3>
  <div class="mt10">
    <a @click="clickDisable" class="mr10">{{ disabled ? 'enable' : 'disable' }}</a>
    <a @click="clickClear" class="mr10">清空内容</a>
    <a @click="clickHeight(600)" class="mr10">600高度</a>
    <a @click="clickHtml('设置HTML')" class="mr10">设置HTML</a>
  </div>
  <f-editor :height="height" @focus="focus" :disabled="disabled" v-model:value="dataValue" />
  {{ dataValue }}
</template>

<script setup>
import { onBeforeMount, ref } from 'vue';

const disabled = ref(false);
const dataValue = ref('<p>测试model传入AAA</p>');
const focus = () => {
  console.log('focus');
};
const clickHtml = (str) => {
  dataValue.value = str;
};
const height = ref(300);
const clickHeight = (hh) => {
  height.value = hh;
};

const clickClear = () => {
  dataValue.value = '';
};
const clickDisable = () => {
  disabled.value = !disabled.value;
};

const onBlur = (e) => {
  console.log('onBlur', e);
};

onBeforeMount(() => {});
</script>

<style lang="scss"></style>
